<template>
  <div class="email-management">
    <a-card>
      <div class="buttons">
        <a-button
          icon="plus"
          type="primary"
          class="mb-[10px]"
          @click="visible = true"
          >{{ $t("system.emailmanage.add") }}</a-button
        >
      </div>
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="{ current, total }"
        @change="getEmailList"
      >
        <template slot="EmailType" slot-scope="text, record">
          {{
            $t(
              typeList.filter((item) => item.value === record.EmailType)[0]
                ?.label
            )
          }}
        </template>
        <template slot="EmailUpdatetime" slot-scope="text, record">
          {{ record.EmailUpdatetime || record.EmailCreatetime }}
        </template>
        <template slot="operate" slot-scope="text, record">
          <a-button type="link" @click="editRow(record.Id)">{{
            $t("user.verification-code.required111566147")
          }}</a-button>
          <a-popconfirm
            v-if="record.EmailAutomatic === 2"
            :title="$t('user.verification-code.required111566110577225')"
            :ok-text="$t('user.verification-code.required1166')"
            :cancel-text="$t('user.email.required11')"
            @confirm="() => delRow(record.Id)"
          >
            <a-button type="link">{{ $t("app.setting.copy") }}</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      :visible="visible"
      :title="$t('system.emailmanage.drawer.title')"
      width="70%"
      wrapClassName="email-manage-drawer"
      @close="close"
    >
      <a-form
        :form="form"
        :label-col="{ span: lang ? 5 : 8 }"
        :wrapper-col="{ span: lang ? 19 : 16 }"
        labelAlign="left"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('breach.list.content.table.creatorcopy')">
              {{ form.getFieldValue("CreatorStr") || currentLogin.name }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('breach.list.content.table.createtime')">
              {{
                form.getFieldValue("EmailCreatetime") ||
                moment().format("YYYY-MM-DD HH:mm:ss")
              }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('system.emailmanage.table.name')">
              <a-input
                v-decorator="[
                  'EmailName',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'system.emailmanage.drawer.form.name.placeholder'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="
                  $t('system.emailmanage.drawer.form.name.placeholder')
                "
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('system.emailmanage.table.type')">
              <a-select
                :placeholder="
                  $t('system.emailmanage.drawer.form.type.placeholder')
                "
                v-decorator="[
                  'EmailType',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'system.emailmanage.drawer.form.type.placeholder'
                        ),
                      },
                    ],
                  },
                ]"
              >
                <a-select-option v-for="item in typeList" :key="item.value">
                  {{ $t(item.label) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('system.emailmanage.table.describe')">
              <a-textarea
                rows="4"
                :maxLength="50"
                v-decorator="[
                  'EmailOverview',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'system.emailmanage.drawer.form.describe.placeholder'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="
                  $t('system.emailmanage.drawer.form.describe.placeholder')
                "
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('breach.steps.step2.email.table.title')">
              <a-input
                v-decorator="[
                  'EmailTitle',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'system.emailmanage.drawer.form.title.placeholder'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="
                  $t('system.emailmanage.drawer.form.title.placeholder')
                "
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <wang-editor
          v-if="visible"
          ref="wangEditor"
          :value="editorValue"
          :placeholder="
            $t('system.emailmanage.drawer.form.content.placeholder')
          "
        />
        <div class="buttons mt-[20px]">
          <a-button class="mr-[20px]" type="primary" @click="submit">{{
            $t("system.emailmanage.drawer.buttons.submit")
          }}</a-button>
          <a-button @click="close">{{
            $t("app.setting.content-width.fluid2222333")
          }}</a-button>
        </div>
      </a-form>
    </a-drawer>
  </div>
</template>

<script>
import moment from "moment";
import WangEditor from "@/components/Editor/WangEditor.vue";
import {
  createEmailTemplate,
  deleteEmailTemplate,
  getEmailTemplateDetail,
  getEmailTemplateList,
} from "@/api/dataBreach/form";
export default {
  name: "emailManagement",
  components: { WangEditor },
  data() {
    return {
      columns: [
        {
          title: () => this.$t("system.emailmanage.table.name"),
          dataIndex: "EmailName",
          key: "EmailName",
        },
        {
          title: () => this.$t("system.emailmanage.table.describe"),
          dataIndex: "EmailOverview",
          key: "EmailOverview",
        },
        {
          title: () => this.$t("system.emailmanage.table.type"),
          key: "EmailType",
          scopedSlots: { customRender: "EmailType" },
        },
        {
          title: () => this.$t("breach.list.content.table.creatorcopy"),
          dataIndex: "CreatorStr",
          key: "CreatorStr",
        },
        {
          title: () => this.$t("breach.list.content.table.createtime"),
          dataIndex: "EmailCreatetime",
          key: "EmailCreatetime",
        },
        {
          title: () => this.$t("user.verification-code.required1115661105787"),
          dataIndex: "EmailUpdatetime",
          key: "EmailUpdatetime",
          scopedSlots: { customRender: "EmailUpdatetime" },
        },
        {
          title: () => this.$t("di.menus"),
          key: "operate",
          scopedSlots: { customRender: "operate" },
        },
      ],
      dataSource: [],
      visible: false,
      form: this.$form.createForm(this),
      currentLogin: this.$store.state.user.info,
      typeList: [
        { label: "menu.title.breach", value: 3 },
        { label: "DPIA", value: 1 },
        { label: "RPA", value: 4 },
        { label: "system.emailmanage.drawer.form.type.risk", value: 2 },
      ],
      lang: localStorage.getItem("lang").includes("zh-CN"),
      editorValue: "",
      editingId: undefined,
      total: 0,
      current: 1,
    };
  },
  mounted() {
    this.getEmailList();
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        that.lang = e.value.includes("zh-CN");
      }
    });
  },
  methods: {
    moment,
    async delRow(Id) {
      let res = await deleteEmailTemplate({ Id });
      if (res.code === 1) {
        this.getEmailList();
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
      }
    },
    async getEmailList(pagination) {
      let { data } = await getEmailTemplateList({
        page: pagination?.current || 1,
        pageSize: pagination?.pageSize || 10,
      });
      this.dataSource = data.Lists;
      this.total = data.Total;
      this.current = data.Page;
    },
    close() {
      this.visible = false;
      this.editingId = undefined;
      this.form.resetFields();
    },
    submit() {
      this.form.validateFields(async (err, value) => {
        if (!err) {
          // 生成模板
          let res = await createEmailTemplate({
            Id: this.editingId,
            ...value,
            EmailAutomatic: 2,
            EmailContent: this.$refs.wangEditor.getContent(),
          });
          if (res.code === 1) {
            this.getEmailList();
            this.$message.success(
              this.$t("user.verification-code.required111566171")
            );
            this.close();
          }
        }
      });
    },
    async editRow(Id) {
      let { data } = await getEmailTemplateDetail({ Id });
      this.editingId = Id;
      this.editorValue = data.EmailContent;
      setTimeout(() => {
        this.form.setFieldsValue(data);
      });
      this.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.email-management {
  .buttons {
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>
<style lang="less">
.email-manage-drawer {
  .ant-drawer-body {
    padding: 10px 20px;
    .ant-form-item {
      margin-bottom: 12px;
      textarea {
        resize: none;
      }
    }
    .buttons {
      display: flex;
      justify-content: center;
    }
  }
}
</style>